<template>
  <div ref="productSelectPageRef" class="product_select_wrap page_view_animate">
    <div class="query_card">
      <a-form
        :model="queryFormData"
        name="product_elect_query_form"
        class="product_elect_query_form"
        style="font-family: VIVO1"
        layout="inline"
        autocomplete="off"
        @finish="queryFormSubmit"
        ref="queryFormRef"
      >
        <a-form-item label="产品编码" name="productCode">
          <a-input
            v-model:value="queryFormData.productCode"
            placeholder="请输入货品编码"
            spellcheck="false"
            allowClear
          />
        </a-form-item>

        <a-form-item
          label="产品名称"
          name="productName"
          style="margin-left: 10px"
        >
          <a-input
            v-model:value="queryFormData.productName"
            placeholder="请输入产品名称"
            spellcheck="false"
            allowClear
          />
        </a-form-item>

        <a-form-item
          label="规格"
          name="specification"
          style="margin-left: 10px"
        >
          <a-input
            v-model:value="queryFormData.specification"
            placeholder="请输入规格补充或备注"
            spellcheck="false"
            allowClear
          />
        </a-form-item>

        <a-form-item
          label="产品类别"
          name="productCategory"
          style="margin-left: 10px"
        >
          <a-select
            style="width: 180px"
            :options="productCategoryList"
            v-model:value="queryFormData.productCategory"
            placeholder="请选择产品类别"
            popupClassName="custom_select_popup"
            allowClear
            show-search
          >
            <!-- <a-select-option
              v-for="category in productCategoryList"
              :key="category.value"
              :value="category.value"
              >{{ category.label }}</a-select-option
            > -->
          </a-select>
        </a-form-item>

        <a-form-item style="margin-left: 10px">
          <a-button
            type="primary"
            :icon="h(SearchOutlined)"
            style="background: #07c23c"
            html-type="submit"
          >
            查询
          </a-button>
          <a-button
            style="margin-left: 20px"
            type="primary"
            :icon="h(ReloadOutlined)"
            @click="queryFormReset"
            danger
          >
            重置
          </a-button>
          <a-button
            style="margin-left: 20px"
            type="primary"
            :icon="h(PlusOutlined)"
          >
            新增
          </a-button>
        </a-form-item>
      </a-form>
    </div>

    <div class="table_card">
      <a-watermark
        :content="userStore.userInfo.userName"
        :width="240"
        :font="{
          fontSize: 28,
          fontWeight: 500,
          fontFamily: 'Apple-R',
          color: 'rgba(0,0,0,0.10)',
        }"
        :offset="[0, 80]"
        style="height: calc(100% - 100px)"
      >
        <a-table
          :columns="tableColumns"
          :data-source="tableData"
          :loading="isTableLoading"
          :pagination="false"
          class="custom_table"
          size="small"
          :scroll="{
            y: tableScrollHegiht,
          }"
          style="border-radius: 8px; min-height: 660px"
          @change="tableChange"
        >
          <!-- <template #bodyCell="{ column, text }">
          <template v-if="column.dataIndex === 'name'"
            >{{ text.first }} {{ text.last }}</template
          >
        </template> -->
        </a-table>

        <div class="pagination_box">
          <a-pagination
            v-model:current="queryFormData.page"
            v-model:pageSize="queryFormData.size"
            show-size-changer
            :defaultPageSize="queryFormData.size"
            :total="total"
            :pageSizeOptions="['5', '10', '15', '20']"
            show-less-items
            @change="tableChange"
          />
        </div>
      </a-watermark>
    </div>
  </div>
</template>

<script>
import { defineComponent, onMounted, ref, computed, h } from "vue";
import "./index.scss";
import _ from "lodash";
export default defineComponent({
  name: "ProductSelect",
});
</script>
<script setup>
import { useUserStore } from "@/stores";
import {
  SearchOutlined,
  PlusOutlined,
  PlusSquareOutlined,
  ReloadOutlined,
} from "@ant-design/icons-vue";
import { calculateTableScrollHegiht, onResize } from "@/utils/page";
import { filterOption } from "@/utils/select_component";
import { selectProductDataApi } from "@/api/productSelect";

const userStore = useUserStore();

// 表格滚动高度
const tableScrollHegiht = ref(calculateTableScrollHegiht());

// 页面Ref
const productSelectPageRef = ref("");

// 查询表单Ref
const queryFormRef = ref(null);

// 查询表单数据
const queryFormData = ref({
  // 页码
  page: 1,
  // 每页条数
  size: 15,
  // 产品编码
  productCode: "",
  // 产品名称
  productName: "",
  // 规格
  specification: "",
  // 产品类别
  productCategory: null,
});

// 总条数
const total = ref(50);

// 表格加载标识
const isTableLoading = ref(false);

// 表格数据
const tableData = ref([
  {
    num: 1,
    name: "张三",
    age: 50,
  },
  {
    num: 2,
    name: "李四",
    age: 20,
  },
  {
    num: 3,
    name: "王五",
    age: 24,
  },
  {
    num: 4,
    name: "赵六",
    age: 36,
  },
  {
    num: 5,
    name: "孙七",
    age: 15,
  },
  {
    num: 6,
    name: "王八",
    age: 45,
  },
  {
    num: 7,
    name: "张三",
    age: 50,
  },
  {
    num: 8,
    name: "李四",
    age: 20,
  },
  {
    num: 9,
    name: "王五",
    age: 24,
  },
  {
    num: 10,
    name: "赵六",
    age: 36,
  },
  {
    num: 11,
    name: "孙七",
    age: 15,
  },
  {
    num: 12,
    name: "王八",
    age: 45,
  },
  {
    num: 13,
    name: "赵六",
    age: 36,
  },
  {
    num: 14,
    name: "孙七",
    age: 15,
  },
  {
    num: 15,
    name: "王八",
    age: 45,
  },
]);

// 表格字段规则
const tableColumns = ref([
  {
    title: "序号",
    dataIndex: "num",
    sorter: (a, b) => a.num - b.num,
    width: 120,
  },
  {
    title: "姓名",
    dataIndex: "name",
    sorter: (a, b) =>
      a.name.localeCompare(b.name, "fr", { sensitivity: "base" }),
  },
  {
    title: "年龄",
    dataIndex: "age",
    sorter: (a, b) => a.age - b.age,
  },
]);

// 产品类别列表
const productCategoryList = ref([
  {
    label: "类别1",
    value: 1,
  },
  {
    label: "类别2",
    value: 2,
  },
]);

// 表格 chanbge 事件
const tableChange = (page, size) => {
  console.log(e);
  queryFormData.value.page = page;
  queryFormData.value.size = size;
};

// 查询表单重置
const queryFormReset = () => {
  queryFormRef.value.resetFields();
  console.log(queryFormData.value);
};

// 查询表单提交
const queryFormSubmit = (values) => {
  selectTableData();
};

// 查询表格数据
const selectTableData = async () => {
  let data = _.cloneDeep(queryFormData.value);
  // isTableLoading.value = true;
  // await selectProductDataApi(data)
  //   .then((res) => {
  //     console.log(res);
  //   })
  //   .finally(() => {
  //     isTableLoading.value = false;
  //   });
};

// init
onMounted(() => {
  selectTableData();
});

// resize
onResize(() => {
  tableScrollHegiht.value = calculateTableScrollHegiht();
});
</script>

<style lang="scss" scoped></style>
